<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <!-- <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="状态">
            <el-select v-model="searchForm.status">
              <el-option label="全部" value="" />
              <el-option
                v-for="(oVal, oIdx) of auditStatus"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template> -->

      <el-table :data="tableData" border>
        <el-table-column prop="real_name" label="实名信息" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="nick_name" label="微信昵称" />
        <el-table-column prop="avatar_url" label="微信头像">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.avatar_url"
              :preview-src-list="[row.avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template #default="{ row }">
            <div>{{row.sex=='1'?'男':'女'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="subdistrict_name" label="所属小区" />
        <el-table-column prop="volunteerStatus" label="状态">
          <template #default="{ row }">
            <span >
            {{row.volunteerStatus=="1"?'待审核':(row.volunteerStatus=='2'?'审核通过':'不通过')}}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row }">
            <!-- <el-button
              type="text"
              @click="openEditRow(row, 'builingForm', initInfoCard)"
              >查看详情</el-button
            > -->
            <!-- <template v-if="row.status === 1"> -->
            <template>
              <el-button type="text" @click="changeStatus(row.usedId, '2')"
                >通过</el-button
              >
              <el-button type="text" @click="changeStatus(row.usedId, '3')"
                >不通过</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit, auditStatus } from "@/utils/mixins";

export default {
  mixins: [table, addOrEdit, auditStatus],

  data: () => ({
    showAddOrEdit:false,
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },
    auditStatus: [
      {
        value: 1,
        label: "待审核",
      },
      {
        value: 2,
        label: "通过",
      },
      {
        value: 3,
        label: "未通过",
      },
    ],
    builingForm: {
      name: "",
    },
  }),

  created() {
    API.getCommunityList().then(({data})=>{
      this.communityList=data.items.map(item=>{
        return {id:item.id,name:item.name}
      })
    })
    this.getList()
  },

  methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.volunteerApplyList(this.searchForm)
        .then(({data}) => {
          data.items.forEach(item=>{
            item.user_info.usedId=item.party_volunteer_info.user_id
            item.user_info.volunteerStatus=item.party_volunteer_info.status
            item.user_info.subdistrict_name=item.user_info.subdistrict_id?this.communityList.filter(sitem=>{
              return sitem.id==item.user_info.subdistrict_id
            })[0].name:'未填写'
          })
          let results=data.items.map(item=>{
            return item.user_info
          })

          console.log(results)
          this.tableData=results
          this.tableTotal=results.length
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 审核管理员
    changeStatus(id,value){
      let data={
        id:id,
        status:value
      }
      console.log(data)
      API.volunteerCheck(data)
        .then(() => {
          this.$message.success("状态更新成功！");
          this.getList();
        }).catch((err) => {
        })
    }
  },
};
</script>

<style lang="scss" scoped>
    ::v-deep{
    .el-message-box{
      min-width:400px;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-input .el-input__inner{
      border-radius:4px !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
    .el-message-box__message{
      position: absolute !important;
      top:50% !important;
      left:40px !important;
    }
    .el-form-item__label{
      font-size:16px !important;
    }
  }
</style>
